<template>
  <div class="app-container layout-create-good">
    <div class="steps">
      <el-steps :active="active" simple>
        <el-step title="商品信息" icon="el-icon-edit"></el-step>
        <el-step title="商品规格" icon="el-icon-upload"></el-step>
        <el-step title="商品价格" icon="el-icon-picture"></el-step>
      </el-steps>
    </div>
    <div class="contant">
      <hcbk-good-info v-show="active === 1" @good-next="handleGoodNext"></hcbk-good-info>
      <hcbk-good-spec v-show="active === 2" @good-next="handleGoodNext"></hcbk-good-spec>
      <hcbk-good-price v-show="active === 3"></hcbk-good-price>
    </div>
  </div>
</template>
<script>
import GoodInfo from "./components/GoodInfo.vue";
import GoodSpec from "./components/GoodSpec.vue";
import GoodPrice from "./components/GoodPrice.vue";
export default {
  name: "CreateGood",
  components: {
    HcbkGoodInfo: GoodInfo,
    HcbkGoodSpec: GoodSpec,
    HcbkGoodPrice: GoodPrice
  },
  data() {
    return {
      active: 1
    };
  },
  methods: {
    handleGoodNext() {
      console.log(111111111111);
      this.active = this.active + 1;
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.layout-create-good {
  .steps {
  }
}
</style>


